<template>
  <div class="container">
    <BackBtn />
    <BaseTable
      :request="request"
      :params.sync="params"
      ref="baseTable"
      :is-request="false"
      style="margin-top: 16px"
    >
      <el-table-column label="ID" prop="id" width="80px" />
      <el-table-column :label="$t('名称')" prop="name" />
      <!-- <el-table-column :label="$t('操作名')" prop="action" /> -->
      <el-table-column :label="$t('文件路径')" prop="file">
        <template slot-scope="scope">
          {{ scope.row.file }}
        </template>
      </el-table-column>
      <!-- <el-table-column :label="$t('描述')" prop="description" /> -->
      <el-table-column fixed="right" align="right">
        <template slot-scope="scope">
          <!-- <EditBtn @click="goEdit(scope.row)" /> -->
          <el-button @click="goEdit(scope.row)">{{ $t('编辑') }}</el-button>
          <!-- <UpdateBtn @click="goRefresh(scope.row)" /> -->
        </template>
      </el-table-column>
    </BaseTable>
    <OnlineEditor
      :dialog-show.sync="dialogShow"
      :editor-content="tempForm.content"
      :editor-type="fileType"
      :curr-path="currEditorPath"
      :width="80"
    />
  </div>
</template>

<script>
import themeApi from '@/api/theme'
import mouldApi from '@/api/theme'
export default {
  data() {
    return {
      request: themeApi.tmpFile,
      params: {},
      fileType: 'html',
      currEditorPath: '',
      dialogShow: false,
      tempForm: {
        content: '',
        path: ''
      },
      tempRules: {
        content: [{ required: 'true', message: '内容不能为空', tigger: 'blur' }]
      },
      num: 0
    }
  },
  mounted() {
    this.params = {
      website_id: this.$route.query.id,
      theme: this.$route.query.tname,
      theme_id: this.$route.query.tid,
      lang: this.$route.query.lang
    }
    this.getList()
  },
  methods: {
    getList() {
      this.$refs.baseTable.getList('search')
    },
    // 编辑
    goEdit(row) {
      this.tempForm.path = row.real_path
      this.fileType = this.getFileExt(row.real_path)
      this.currEditorPath = this.tempForm.path
      mouldApi.fileRead({ path: this.tempForm.path }).then(res => {
        this.tempForm.content = res.data
        this.dialogShow = true
      })
    },
    getFileExt(path) {
      return path.substr(path.lastIndexOf('.') + 1)
    },
    // 更新
    goRefresh(row) {
      this.tempForm.path = row.real_path
      themeApi.singleUpdate({ path: this.tempForm.path }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    },
    submit() {
      themeApi.fileUpdate({ ...this.tempForm }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.dialogShow = false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#file {
  .el-dialog {
    background-color: #282722;
  }
  .el-dialog__header {
    padding: 10px 20px 1px;
    .el-dialog__title {
      color: #fff;
      font-size: 16px;
      // font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 0;
  }
  .save.el-button--primary {
    width: 54px;
    height: 25px;
    border-color: #565656;
    background-color: #565656;
    font-size: 12px;
  }
  .btn {
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 15px;
    text-align: left;
  }
}
</style>
<style scoped lang="scss">
.top {
  display: flex;
  justify-content: left;
  align-items: center;
  .back {
    top: 16px;
    right: 21px;
  }
}
</style>
